import React from "react";
import { Filters } from "../types/todo";

interface FilterItemProps {
  filters: Filters;
  setFilter: (filter: string) => void;
}
const FilterItem = ({
  filters,
  setFilter,
}: FilterItemProps) => {

  const handleFilter = (filter: string) => {
    setFilter(filter);
  };
 
  return (
    <div>
      {
        filters.map((filter) => (
          <button
            key={filter}
            className={`filter-button ${filter === "全部" ? "active" : ""}`}
            onClick={() => handleFilter(filter)}
          >
            {filter}
          </button>
        ))
      }
    
    </div>
  );
};

export default FilterItem;
